<!-- 疾病查询页面 -->
<template>
  <TopNavigation leftText="疾病查询" />
  <view class="searchBox">
    <wd-search
      class="w-100%"
      style="z-index: 10; padding: 20rpx 0"
      hide-cancel
      placeholder-left
      @click="tzSS"
    />
    <view class="wraper">
      <wd-sidebar v-model="active" @change="handleChange">
        <wd-sidebar-item
          v-for="(item, index) in categories"
          :key="index"
          :value="index"
          :label="item.label"
          :disabled="item.disabled"
        />
      </wd-sidebar>
      <view class="content" :style="`transform: translateY(-${active * 100}%)`">
        <scroll-view
          v-for="(item, index) in categories"
          :key="index"
          class="category"
          scroll-y
          scroll-with-animation
          :show-scrollbar="false"
          :scroll-top="scrollTop"
          :throttle="false"
          @click="tzDisearch"
        >
          <wd-cell-group border>
            <wd-cell v-for="(cell, index) in item.items" :key="index" :title="cell.title"></wd-cell>
          </wd-cell-group>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import TopNavigation from "@/components/TopNavigation.vue";
function tzSS() {
  console.log("跳转到搜索页面");
}
import { ref, nextTick } from "vue";

const active = ref<number>(1);
const scrollTop = ref<number>(0);
const subCategories = new Array(24).fill({ title: "疾病名称" }, 0, 24);
const categories = ref([
  {
    label: "骨科疾病",
    icon: "thumb-up",
    items: subCategories,
    disabled: false,
  },
  {
    label: "心血管系统疾病",
    icon: "thumb-up",
    items: subCategories,
    disabled: false,
  },
  {
    label: "骨科疾病",
    icon: "thumb-up",
    items: subCategories.slice(0, 18),
    disabled: false,
  },
  {
    label: "心血管系统疾病",
    icon: "thumb-up",
    items: subCategories,
    disabled: false,
  },
  {
    label: "骨科疾病",
    icon: "thumb-up",
    items: subCategories.slice(0, 18),
    disabled: false,
  },
  {
    label: "心血管系统疾病",
    icon: "thumb-up",
    items: subCategories,
    disabled: false,
  },
]);

function handleChange({ value }) {
  active.value = value;
  scrollTop.value = -1;
  nextTick(() => {
    scrollTop.value = 0;
  });
}

// 跳转到疾病详情页面
function tzDisearch() {
  uni.navigateTo({ url: "/pages/DiseaseDetails/index" });
}
</script>

<style lang="scss" scoped>
.searchBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow: hidden;
}
.wraper {
  display: flex;
  width: 100%;
  height: auto;
  height: calc(100vh - var(--window-top));
  // height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom));
  height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom));
}
.content {
  flex: 1;
  background: #fff;
  transition: transform 0.3s ease;
}
.category {
  box-sizing: border-box;
  height: 100%;
}
</style>
